<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#id1{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
			#id2{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			#id3{
				width: 200px;
				height: 200px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		1.按钮和DIV的单击事件（三种绑定方式）
		<div id="id1"onclick="divclick1();">
			
		</div>
		<div id="id2">
			
		</div>
		<div id="id3">
			
		</div>
		<button type="button" onclick="btnclick1();">按钮1</button>
		<button type="button" id="btn2" >按钮2</button>
		<button type="button" id="btn3" >按钮3</button>
	</body>
	<script type="text/javascript">
	//div
//1
	function divclick1(){
		console.log('你点击了div1')
	}
	
	//2
	function divclick2(){
		console.log('你点击了div2')
	}
	document.getElementById('id2').onclick=divclick2;
	//3
	function divclick3(){
		console.log('你点击了div3')
	}
	document.getElementById('id3').addEventListener('click',divclick3);
	
	//按钮
	//1
		function btnclick1(){
			console.log('你点击了按钮1!')
		}
	
		//2
		document.getElementById('btn2').onclick=function(){
			console.log('你点击了按钮2!')
		}
		//3
		function btnclick2(){
			console.log('你点击了按钮3!')
		}
		document.getElementById('btn3').addEventListener('click',btnclick2);
	</script>
</html>